<template>
    <view v-if="listData.length > 0" style="margin: 20rpx 0;">
        <view
                v-for="item in listData"
                class="listContent"
                @click="goto(`/pagesSub-My/my/messageDetail?noticeId=${item.id}`)">
            <view class="title_header">
                <view class="title">{{item.title}}</view>
                <view class="time gray_font">{{item.sendTime}}</view>
            </view>
            <view class="list_inner">
                <view>
                    {{ item.content }}
                </view>
                <view style="float: right;" v-if="item.isRead==1" class="icon_wd"></view>
            </view>

        </view>
        <uni-load-more :status="statusLoad" :content-text="contentText" v-if="showLoadMore"/>
    </view>
    <view class="noInfo_Img" v-else-if="showNoInfo">
        <image src="../static/images/icon_lack_message@2x.png"></image>
    </view>
</template>

<script>
    import { messageType } from '@/api/my.js';
    export default {
        data() {
            return {
                defaultImg:require("../static/images/icon_lack_message@2x.png"),
                //分页开始
                showLoadMore: false,
                showNoInfo: false,
                statusLoad:'more',
                contentText: {
                    contentdown: '查看更多',
                    contentrefresh: '加载中...',
                    contentnomore: '没有更多'
                },
                total:0,//总条数
                nowCount:0,//当前累计显示条数
                //分页结束
                listData: [],//列表数据
                isReadStatus:{
                    0:"已读",
                    1:"未读"
                },
                // 查询参数
                queryParams: {
                    type:'',
                    platForm:1,
                    pageNum: 1, //第几页
                    pageSize: 10 //每页显示条数
                }
            }
        },
        onShow() {
            let _this=this;
            _this.$set(_this, 'listData', []);
            let pagearr = getCurrentPages();//获取应用页面栈
            let currentPage = pagearr[pagearr.length - 1];//获取当前页面信息
            console.log('option:' , currentPage.options.type)//获取页面传递的信息
            _this.queryParams.type = currentPage.options.type;
            console.log(_this.queryParams.type);
            _this.nowCount = 0;
            _this.total = 0;
            _this.queryParams.pageNum = 1;
            _this.showLoadMore = false;
            _this.getList();
            _this.$forceUpdate()
        },

        onReachBottom() {
            if (this.nowCount>0 && (this.nowCount>=this.total)){
                this.statusLoad = "noMore";
            }else{
                this.showLoadMore = true;
                this.statusLoad = "loading";
                this.getList();
            }

        },
        methods:{
            goto(url) {
                uni.navigateTo({
                    url:url
                })
            },
            getList(){
                let _this = this;
                let newData;
                let listData = _this.listData;
                let nowCount = _this.nowCount;
                let pageNum = _this.queryParams.pageNum;
                if (_this.nowCount>0 && (_this.nowCount>=_this.total)) return;
                uni.showLoading({
                    title:'加载中'
                })
                messageType(_this.queryParams).then(res => {
                    let listNew = [];
                    if(_this.queryParams.pageNum!=1){
                        newData = listData.concat(res.rows);
                    }else{
                        newData=res.rows;
                    }
                    _this.$set(_this, 'listData', newData);//使用$set可以避免this直接赋值，在组件上【有时】不及时生效的问题（偶尔会出现）
                    //设置分页
                    _this.total = res.total;
                    _this.queryParams.pageNum = pageNum+1;
                    _this.nowCount = nowCount + res.rows.length;

                    if(pageNum ==1 && res.rows.length<=0){
                        _this.showNoInfo = true;
                    }

                    uni.hideLoading();

                }).catch(res => {
                    uni.hideLoading();
                    console.log(res);
                });
            },
        }
    }
</script>

<style scoped>
    .title_header{
        display: flex;
        justify-content: space-between;
        font-size: 30rpx;
    }
    .time{
        font-size: 27rpx;
    }
    .listContent{
        background-color: #FFFFFF;
        padding: 30rpx;
        border-bottom: 1rpx solid #FBFBFB;
    }
    .list_inner{
        font-size: 29rpx;
        color:#757575;
    }
    .icon_wd{
        width: 15rpx;
        height: 15rpx;
        border-radius: 100%;
        background-color: #DD524D;
    }
</style>
